<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
    />
    <title>合拍街</title>
    <link href="../css/style.css" rel="stylesheet" type="text/css"/>
    <link href="../css/find.css" rel="stylesheet" type="text/css"/>
    <link href="../iconfont/iconfont.css" rel="stylesheet" type="text/css"/>
    <style>
        .btn span {
            margin: 0 10px;
        }

        input {
            border: 1px solid #ccc
        }

        textarea {
            border: 1px solid #ccc
        }
    </style>
</head>

<body>
<header id="header">
    <a href="index.html" class="iconfont fl">&#xe63f;</a>
    <div class="title">模态资料</div>
    <a href="#" class="iconfont fr">&#xe6a0;</a>
</header>
<div class="content">
    <div class="find-release">
        <div class="title">
            发布约拍信息
        </div>
        <div>
            <p>面向地区<span>[必填]</span></p>
            <select name="born">
                <option value="景点">北京</option>
                <option value="室内">上海</option>
                <option value="郊区">杭州</option>
                <option value="商场">西安</option>
            </select>
            <select name="born">
                <option value="景点">北京</option>
                <option value="室内">上海</option>
                <option value="郊区">杭州</option>
                <option value="商场">西安</option>
            </select>
        </div>
        <div>
            <p>约拍费用<span>[必填]</span></p>
            <input id="cost1" type="radio" name="gender" value="male">
            <label for="cost1">希望互勉</label>
            <br/>
            <input id="cost2" type="radio" name="gender" value="male">
            <label for="cost2">需要收费</label>
            <br/>
            <input id="cost3" type="radio" name="gender" value="male">
            <label for="cost3">愿意付费</label>
            <br/>
            <input id="cost4" type="radio" name="gender" value="male">
            <label for="cost4">费用协商</label>
        </div>
        <div>
            <p>约拍限制<span>[必填]</span></p>
            <input id="limit1" type="radio" name="gender" value="male">
            <label for="limit1">接受所有人的约拍</label>
            <br/>
            <input id="limit2" type="radio" name="gender" value="male">
            <label for="limit2">只接受合拍街club会员的约拍</label>
        </div>
        <div>
            <p>约拍保障<span>[必填]</span></p>
            <input id="ensure" type="checkbox" name="gender" value="male">
            <label for="ensure">要求对方存入信用保证金</label>
            <span class="explain">查看说明</span>
        </div>
        <div>
            <p>发布内容<span>[必填]</span></p>
            <p class="notes">
                为了保护隐私，请勿在此处包含联系方式(否则审核不通过)</p>
            <textarea name="" id="" cols="30" rows="5" placeholder="比如自我介绍等"></textarea>
        </div>
        <div>
            <p>拍摄时间说明</p>
            <input type="text" name="username" placeholder="请约定拍摄时间，选填">
        </div>
        <div>
            <p>拍摄地点说明</p>
            <input type="text" name="username" placeholder="请约定拍摄地点，选填">
        </div>
        <div>
            <p>拍摄成片说明</p>
            <input type="text" name="username" placeholder="比如原片多少张，精修多少张">
        </div>
        <div>
            <p>拍摄标签<span>[请选择拍摄主题标签]</span></p>
            <input type="hidden" name="shoot_tags" id="shoot_tags"/>
            <ul id="tags_list" class="clearfix">
                <li class="fl">情侣</li>
                <li class="fl">商务</li>
                <li class="fl">汉服</li>
                <li class="fl">孕照</li>
                <li class="fl active">儿童摄影</li>
                <li class="fl">暗黑</li>
                <li class="fl">情绪</li>
                <li class="fl">私房</li>
                <li class="fl">亲子</li>
                <li class="fl">校园故事</li>
                <li class="fl active">民国</li>
                <li class="fl">日系小清新</li>
                <li class="fl">民国</li>
                <li class="fl active">商务</li>
                <li class="fl">民国</li>
                <li class="fl">汉服</li>
                <li class="fl active">孕照</li>
                <li class="fl">儿童摄影</li>
                <li class="fl">暗黑</li>
                <li class="fl active">情绪</li>
                <li class="fl">私房</li>
                <li class="fl">亲子</li>
                <li class="fl active">校园故事</li>
                <li class="fl">日系小清新</li>
            </ul>
        </div>
        <div class="clearfix">
            <p>附加照片<span>[最多9张，单张不要超过20M]</span></p>
            <p><span style="margin-left: 0">请上传您的个人照片或者作品，请勿盗图</span></p>
            <div class="upload">
                <img src="" alt="">
            </div>
        </div>
        <div class="btn">
            <a href="javascript:;" class="submit">提交</a>
            <a href="" class="cancel">取消</a>
        </div>
    </div>
    <div class="dialog explain-dialog" style="padding: 30% 6%">
        <div class="dialog-card">
            <div class="dialog-title">
                用户存入保证金后须遵循：<span class="fr close"></span>
            </div>
            <div class="dialog-select">
                <ul class="clearfix">
                    <li class="fl" style="font-size: 12px">
                        1. 在交流以及拍摄过程中，不会有恶意欺骗行为
                    </li>
                    <li class="fl" style="font-size: 12px">
                        2. 如果在联系确认已经达成拍摄约定后，不会随意毁约
                    </li>
                    <li class="fl" style="font-size: 12px">
                        3. 对于摄影师，拍摄完成后，会按照约定返片给对方
                    </li>
                    <li class="fl" style="font-size: 12px">
                        4. 在对方没有同意的情况下，不会公开对方隐私
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="dialog success-dialog" style="padding: 30% 12%">
        <div class="dialog-card">
            <div class="dialog-top">
                合拍街
            </div>
            <div class="dialog-bottom">
                <h4>发布成功</h4>
                <span class="cancel-color close">取消</span>
                <span class="sure-color close">确定</span>
            </div>
        </div>
    </div>
</div>

<footer id="footer" class="foot">
    <ul>
        <li>
            <a class="home" href="../index.html">
                <p>首页</p>
            </a>
        </li>
        <li class="active">
            <a class="find" href="index.html">
                <p>发现</p>
            </a>
        </li>
        <li>
            <a class="camera" href="../ranking/index.html">
                <p>合拍榜</p>
            </a>
        </li>
        <li>
            <a class="person" href="../user/user_login.html">
                <p>我的</p>
            </a>
        </li>
    </ul>
</footer>
<script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
    $(function () {
        var $explain = $('.explain');
        $explain.on('click', function () {
            $(".explain-dialog").toggleClass('isshow');
        });

        var $submit = $('.submit');
        $submit.on('click', function () {
            $(".success-dialog").toggleClass('isshow');
        });

        var $remove = $(".close");
        $remove.on('click', function () {
            $(".isshow").removeClass('isshow');
        });

        var $tagsLi = $("#tags_list li");
        $tagsLi.on('click', function () {
            $(this).toggleClass('active');
            var $tagsActive = $("#tags_list .active");
            var tags = '';
            for (var i = 0; i < $tagsActive.length; i++) {
                tags += $tagsActive[i].getAttribute('data-tagid') + ',';
            }
            $("#shoot_tags").val(tags.substring(0, tags.length - 1));
        });
    })
</script>
</body>
</html>